/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { message, Button, Card, DatePicker, Tag, Icon, Checkbox, Row, Col, Collapse, Radio, TreeSelect } from 'antd';
import style from './RepSell.less';
import MyTable from '../../../components/common/MyTable';
import Container from '../../../components/common/Container';
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import moment from 'moment';
import MyPagination from '../../../components/common/MyPagination';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const Panel = Collapse.Panel;
const RadioGroup = Radio.Group;
var Group = [
]
class RepSell extends Component {

    constructor(props) {
        super(props)
        this.columns = [
            {
                title: '序号',
                dataIndex: 'num',
                width: '5%',
                align: "center",
                key: "1111",
            },
            {
                title: '时间',
                dataIndex: 'takeTime',
                width: '10%',
                align: "center",
                key: "1",
            },
            {
                title: '企业',
                dataIndex: 'enterprise',
                width: '17%',
                align: "center",
                key: "641",
            },
            {
                title: '燃气站点',
                dataIndex: 'standName',
                width: '15%',
                align: "center",
                key: "2",

            },
            {
                title: '11.6Kg销售',
                dataIndex: 'number116',
                width: '8%',
                align: "center",
                key: "3",
                sorter: (a, b) => a.number116 - b.number116,
            },
            {
                title: '14.5Kg销售',
                width: '8%',
                dataIndex: 'number145',
                align: "center",
                key: "4",
                sorter: (a, b) => a.number145 - b.number145,
            },
            {
                title: '50Kg销售',
                dataIndex: 'number500',
                width: '8%',
                align: "center",
                key: "5",
                sorter: (a, b) => a.number500 - b.number500,
            },
            {
                title: '合计/瓶',
                dataIndex: 'numberTotal',
                width: '8%',
                align: "center",
                key: "6",
                sorter: (a, b) => a.numberTotal - b.numberTotal,
            },

            {
                title: '操作',
                dataIndex: 'userName',
                width: '8%',
                align: "center",
                key: "10",
                render: (text, record) => {
                    return <Tag color="#2db7f5" onClick={this.onDetails.bind(this, record)}>详情</Tag>

                }
            },

        ];

    }

    state = {
        page: 1,
        rows: 10,
        total: 0,
        value: [],
        treeData: [],
        acticon: <Icon type="right" />,
        acttext: "展开",
        actstr: true,
        actkey: "2",
        Radiovalue: "",
        idList: [],
        dan: false,
        duo: true,
        loading: false,
        takeTime: null,
        takeTimeStart: null,
        takeTimeEnd: null,
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        GroupArr: '多站点',
        GroupArrMo: [],

    }

    componentDidMount() {
        request({
            url: `/zhrq-web/gas/gaspandect/getGasSiteList`,
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {

                this.setState({
                    treeData: data.ret.list
                })

                setTimeout(() => {
                    console.log(this.state.treeData)
                }, 1000);
            }
        })



        //初始查询
        this.save(1, 10)

    }

    onGroup = (e) => {

        if (e.target.value == '单站点') {
            this.setState({
                dan: true,
                duo: false
            })
        }

        if (e.target.value == '多站点') {
            this.setState({
                dan: false,
                duo: true
            })
        }
        this.setState({
            GroupArr: e.target.value,
            value: []
        })


    }



    onGroupMo = (checkedValues) => {



        if (this.state.GroupArr == '多站点') {
            this.setState({
                GroupArrMo: checkedValues
            })
        }



    }

    onDatePicker = (val, v, el) => {
        console.log(val, v, el)
        this.setState({
            [val]: v
        })


    }

    //跳转详情按钮
    onDetails = (record) => {
        console.log(record)

        PublicService.setCookie('RepPanId', record.standId);
        PublicService.setCookie('RepPanTime', moment(record.takeTime).format("YYYY-MM-DD"));
        this.props.history.push('/RepSellDetails');

    }

    //查询按钮
    save = (page, rows, tom) => {
        console.log(this.state.GroupArrMo)
        this.setState({
            loading:true
        })
        if (this.state.GroupArr == '单站点') {
            if(this.state.Radiovalue === "") {
                message.warning("请选取站点后查询!")
                this.setState({
                    loading:false
                })
                return
            }
            let data = {
                groupSignId: this.state.Radiovalue,
                page, rows,
                takeTimeEnd: this.state.takeTimeEnd ? moment(this.state.takeTimeEnd).format("YYYY-MM-DD HH:mm:ss") : "",
                takeTimeStart: this.state.takeTimeStart ? moment(this.state.takeTimeStart).format("YYYY-MM-DD 00:00:00") : "",
            }

            request({
                url: `/zhrq-web/gas/salesofparameter/getPageListBySingle`,
                method: 'POST',
                data: data
            }).then(data => {
                console.log(data)
                if (data.rc == 0) {
                    data.ret.items.forEach((item) => {
                        item.takeTime = moment(item.takeTime).format("YYYY-MM-DD")
                    })
                    this.setState({
                        dataSource: data.ret.items,
                        total: data.ret.rowCount
                    })
                    setTimeout(() => {
                        this.setState({
                            loading:false
                        })
                    },500)
                } else {
                    message.warning("查询失败,请选择正确的站点")
                }
            })

        }

        if (this.state.GroupArr == '多站点' || tom == '多站点') {
            console.log(this.state.idList)
            let data = {
                groupSignIdList: this.state.GroupArrMo,
                page, rows,
                takeTime: this.state.takeTime ? moment(this.state.takeTime).format("YYYY-MM-DD") : "",

            }

            request({
                url: `/zhrq-web/gas/salesofparameter/getPageListByMore`,
                method: 'POST',
                data: data
            }).then(data => {
                console.log(data)
                if (data.rc == 0) {
                    data.ret.items.forEach((item) => {
                        item.takeTime = moment(item.takeTime).format("YYYY-MM-DD")
                    })
                    this.setState({
                        dataSource: data.ret.items,
                        total: data.ret.rowCount
                    })
                    setTimeout(() => {
                        this.setState({
                            loading:false
                        })
                    },500)
                }
            })

        }


    }
    //分页器
    onChangePage = (page, size) => {
        this.save(page, size);
        this.setState({
            page,
            rows: size,
            pageIndex:page,
            pageSize:size
        })
    };

    //单站点
    onRadioGroup = (e) => {
        console.log(e.target.value)
        this.setState({
            Radiovalue: e.target.value
        })
    }

    onOpen = () => {
        if (this.state.actstr) {
            this.setState({
                actkey: "1",
                actstr: false,
                acttext: "收起",
                acticon: <Icon type="down" />
            })
        }

        if (!this.state.actstr) {
            this.setState({
                actkey: "2",
                actstr: true,
                acttext: "展开",
                acticon: <Icon type="right" />
            })
        }

    }

    onTreeSelect = (v, b, n) => {
        console.log(v, b, n)
        this.setState({
            GroupArrMo: v,
            Radiovalue: v,
            value: v
        })
    }

    render() {
        const {total,  loading, selectedRowKeys, dataSource, pageIndex, pageSize, treeData } = this.state
        const columns = this.columns
        const windowWidth = document.body.clientWidth;
        const TimeCondan = [{
            key: "1",
            con: <span><DatePicker size='small' value={this.state.takeTimeStart} onChange={this.onDatePicker.bind(this, "takeTimeStart")} /> 到
             <DatePicker style={{ marginLeft: 10 }} size='small' onChange={this.onDatePicker.bind(this, "takeTimeEnd")} value={this.state.takeTimeEnd} /></span>
        }]

        const TimeConduo = [{
            key: "1",
            con: <span>
                <DatePicker size='small' onChange={this.onDatePicker.bind(this, "takeTime")} value={this.state.takeTime} />
            </span>
        }]
        const height = document.body.clientHeight;
        let containerHeight = '74vh';
        if (windowWidth > 1367) {
            containerHeight = '74vh';
        }


        return (
            <div>
                <div className={style.topBox}>
                    <Card
                        className={style.topCard}
                        bodyStyle={{ padding: 10 }}
                    >
                        <p >
                            <RadioGroup style={{ width: '100%' }} onChange={this.onGroup}
                                value={this.state.GroupArr}
                            >

                                <Row>
                                    <Col span={2} span={2} style={{lineHeight:1.5}}> 模式选取 :</Col>

                                    <Col span={2}><Radio value="多站点">多站点</Radio ></Col>
                                    <Col span={2}><Radio value="单站点">单站点</Radio ></Col>
                                    <Col span={this.state.GroupArr == "单站点" ? 10 : 6}>
                                        <span style={{ marginRight: 10, float: "left",lineHeight:1.5 }}>时间选取 : </span>


                                        {this.state.dan &&
                                            TimeCondan.map((item, key) => {
                                                return (
                                                    item.con
                                                )
                                            })
                                        }

                                        {this.state.duo &&
                                            TimeConduo.map((item, key) => {
                                                return (
                                                    item.con
                                                )
                                            })
                                        }

                                    </Col>
                                    <Col span={4}>
                                        <Button type="primary" size="small" onClick={this.save.bind(this, 1, 10)}>查询</Button>
                                        <Button size="small" style={{ marginLeft: 10 }}>重置</Button>
                                    </Col>


                                </Row>
                            </RadioGroup>
                        </p>


                        <Row style={{ paddingBottom: "-3px" ,marginTop:"1.5vh"}}>
                            <Col span={2} span={2} style={{lineHeight:1.5}}> 站点选取 :</Col>
                            <Col span={6}>
                                <TreeSelect
                                    size="small"
                                    style={{ width: 300 }}
                                    treeData={treeData}
                                    value={this.state.value}
                                    maxTagCount={1}
                                    onChange={this.onTreeSelect}
                                    // treeCheckable={true}
                                    // treeCheckStrictly={true}
                                    // showCheckedStrategy={TreeSelect.SHOW_CHILD}
                                    // searchPlaceholder: 'Please select',
                                    // treeDefaultExpandAll={true}
                                    treeCheckable={this.state.duo}
                                    treeDataSimpleMode={true}

                                />
                            </Col>
                        </Row>


                    </Card>

                </div>
                <div className={style.bottomBox}>
                </div>
                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "1vh" }}
                    exportBtnShow={true}
                    exportBtn={this.exportBtn}
                >

                    <div style={{height:"60vh",overflow:"auto"}}>
                <MyTable
                        // bordered
                        loading={loading}
                        columns={columns}
                        // rowSelection={rowSelection}
                        pagination={false}
                        // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                        dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                    />
                   
                </div>
                <MyPagination
                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage}
                        onShowSizeChange={this.onChangePage}
                    />
                </Container>

            </div>
        )
    }
}
export default (RepSell);
